<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/css/plugins/steps/jquery.steps.css" rel="stylesheet">
    <link href="/css/plugins/datepicker/datepicker3.css" rel="stylesheet">
    <link href="/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">
    <style>
        .short {
            /*width: 150px;*/
            display: inline-block;
            text-align: center;
            padding: 5px 25px 5px 5px;
            margin: 5px;
            border-radius: 20%;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">


    <div class="row">
        @if(count($errors) > 0)
            @foreach($errors->all() as $error)
                <div class="alert alert-danger">{{ $error }}</div>
            @endforeach
        @endif
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-content">
                    <form id="activity-form" method="POST" action="/ceb/activities/store" class="wizard-big form-horizontal">
                        {{csrf_field()}}
                        <h1>基本信息</h1>
                        <fieldset style="position: relative;">
                            <div class="form-group">
                                <label class="control-label col-sm-2">活动名称</label>
                                <div class="col-sm-10">
                                <input class="form-control required" id="activity-name" name="name" type="text">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">活动时间</label>

                                <div class="input-daterange input-group col-sm-10" id="datepicker">
                                    <input type="text" class="input-sm form-control _date" name="start_date"
                                           value="{{ date('Y-m-d') }}"/>
                                    <span class="input-group-addon"> —— </span>
                                    <input type="text" class="input-sm form-control _date" name="end_date"
                                           value="{{ date('Y-m-d') }}"/>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">banner图</label>
                                <div class="col-sm-10">
                                <a id="upload-btn" class="btn btn-lg">上传图片</a>
                                    </div>
                                <input id="banner" name="banner" class="hidden" type="text">
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">活动规则</label>
                                <div class="col-sm-10">
                                <textarea name="rules" class="form-control" rows="5"></textarea>
                                    </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">预期目标</label>
                                <div class="col-sm-10">
                                <textarea name="purpose" class="form-control" rows="5"></textarea>
                                    </div>
                            </div>

                        </fieldset>
                        <h1>活动对象</h1>
                        <fieldset style="position: relative;">

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <div class="radio">
                                        <label><input type="radio" checked="" value="1" id="target1" name="filter_type">渠道</label>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        <label><input type="radio" value="2" id="target2" name="filter_type">群体</label>
                                    </div>
                                </div>
                            </div>
                            <div id="channel-block">
                                <div class="col-sm-2"></div>
                                <div class="col-sm-4 m-l-n">
                                    <select class="form-control" multiple="" id="channel_provider_list"
                                            name="channel_provider">
                                        @foreach($channel_provider_list as $channel_provider)
                                            <option value="{{$channel_provider->id}}">{{$channel_provider->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-2 m-l-n">
                                    <i class="ui-icon-arrow-1-ne icon"></i>
                                </div>
                                <div class="col-sm-4 m-l-n">
                                    <select class="form-control" multiple="" id="channel_list" name="">
                                    </select>
                                </div>
                                <div class="col-sm-2"></div>
                                <div class="col-sm-12" id="selected-channel"></div>
                                <div class="col-sm-12"><a class="btn btn-success hidden btn-get-users">确定</a></div>
                            </div>
                            <div id="group-block" class="hidden">
                                <div class="col-sm-10 m-l-n">
                                    <select class="form-control" multiple="" id="group_list" name="user_group">
                                        <option value="0">全部</option>
                                        @foreach($group_list as $group)
                                            <option value="{{$group->id}}">{{$group->name}}</option>
                                        @endforeach
                                    </select>a
                                    <div class="col-sm-12" id="selected-group"></div>
                                    <div class="col-sm-12"><a class="btn btn-success hidden btn-get-users">确定</a></div>
                                </div>
                            </div>
                            <div class="jqGrid_wrapper">
                                <table id="user-list"></table>
                                <div id="user-list-pager"></div>

                                <div id="selected-user-list"></div>
                            </div>
                        </fieldset>

                        <h1>活动奖励</h1>
                        <fieldset style="position: relative;">
                            <div class="form-group">
                                <label class="col-md-2 form-label">奖池名称</label>
                                <div class="col-sm-8">
                                <input id="reward-keyword" class="form-control">
                                    </div>
                                <div class="col-sm-2">
                                <a class="btn btn-success" id="reward-search-btn">查询</a>
                                    </div>
                            </div>
                            <table id="reward-list"></table>
                            <div id="selected-reward"></div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0"></script>
<script src="/js/plugins/steps/jquery.steps.min.js"></script>
<script src="/js/jquery.cookie.js"></script>

<!-- iCheck -->
<script src="/js/plugins/iCheck/icheck.min.js"></script>
<script src="/js/plugins/datepicker/bootstrap-datepicker.js"></script>

<script src="/js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
<script src="/js/plugins/jqgrid/jquery.jqGrid.min.js"></script>

<script src="/js/webuploader.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script src="/js/common.js"></script>
<script>
    var channel_list = {!! $channel_list->toJson() !!};
    var behavior_list = {!! json_encode($behavior_list) !!};
    $.jgrid.defaults.styleUI = 'Bootstrap';

    function setTags(container, list, postName) {
        container = $(container).empty();
        $.each(list, function (k, v) {
            var s = '<div class="alert alert-success alert-dismissable short">' + v.name;
            if (postName) {
                s += '<input type="text" name="' + postName + '[]" value="' + v.value + '" class="hidden">';
            }
            s += '<button aria-hidden="true" data-dismiss="alert" class="close" type="button" data-value="' + v.value + '">×</button>' +
                    '</div>'
            container.append(s);
        });
    }
    function getSelectedUsers() {
        var grid = $("#user-list");
        var rowKey = grid.getGridParam("selrow");

        if (!rowKey) {
            return [];
        } else {
            return grid.getGridParam("selarrrow");
        }
    }
    $(document).ready(function () {
//        $('#wizard').steps();
        var steps = $("#activity-form").steps({
            bodyTag: "fieldset",
            showFinishButtonAlways: false,
//            forceMoveForward:true,
            enableCancelButton: false,
            onStepChanging: function (event, currentIndex, newIndex) {
                return true;
            },
            onFinished: function (event, currentIndex) {
                var form = $(this);
                form.submit();
            }
        });

        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/js/Uploader.swf',
            // 文件接收服务端。
            server: '/common/files/upload',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            fileNumLimit: 1,
            pick: {
                id: '#upload-btn',
                multiple: false,
            },
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
//            sendAsBinary: true,
            method: "post",
        }).on('uploadSuccess', function (file, result) {
            if (result.code == 1) {
                $('#banner').val(result.data.src);
            } else {
                alert(result.message);
            }
        }).on('uploadBeforeSend', function (object, data, headers) {
            headers['X-XSRF-TOKEN'] = $.cookie('XSRF-TOKEN');
        });


        setDateRange('input[name=start_date]', 'input[name=end_date]');

        $('input[name=filter_type]').on('change', function () {
            var val = $(this).val();
            if (val == 1) {
                $('#channel-block').removeClass('hidden');
                $('#group-block').addClass('hidden');
            } else {
                $('#channel-block').addClass('hidden');
                $('#group-block').removeClass('hidden');
            }
        });

        var channel_map = groupby(channel_list, 'channel_provider_id');
        var channel_container = $('#channel_list');
        $('#channel_provider_list').on('change', function () {
            var cp_id_list = $(this).val();
            channel_container.html('<option value="0">全部</option>');
            $.each(cp_id_list, function (k, id) {
                $.each(channel_map[id], function (k, channel) {
                    var option = document.createElement('option');
                    option.value = channel.id;
                    option.innerHTML = channel.code + '' + channel.no;
                    channel_container.append(option);
                });
            });
        });
        channel_container.on('change', function () {
            var id_list = $(this).val();
            if (id_list.indexOf("0") > -1 || id_list.indexOf(0) > -1) {
                channel_container.children().each(function () {
                    $(this).get(0).selected = true;
                });
                id_list = $(this).val();
                id_list.shift();
            }
            var id_map = flip(id_list);
            var list = [];
            channel_container.children().each(function () {
                var val = $(this).val();
                if (val in id_map) {
                    list.push({
                        name: $(this).html(),
                        value: val
                    });
                }
            });
            setTags('#selected-channel', list,'channel');
            $('#selected-channel .close').on('click', function () {
                var value = $(this).data('value');
                $('option[value=' + value + ']', $(select)).get(0).selected = false;
            });
            if (list.length > 0) {
                $('.btn-get-users').removeClass('hidden');
            } else {
                $('.btn-get-users').addClass('hidden');
            }
        });
        var group_container = $('#group_list');
        $('#user_group_list').on('change', function () {
            var id_list = $(this).val();
            if (id_list.indexOf("0") > -1 || id_list.indexOf(0) > -1) {
                group_container.children().each(function () {
                    $(this).get(0).selected = true;
                });
                id_list = $(this).val();
                id_list.shift();
            }
            var id_map = flip(id_list);
            var list = [];
            group_container.children().each(function () {
                var val = $(this).val();
                if (val in id_map) {
                    list.push({
                        name: $(this).html(),
                        value: val
                    });
                }
            });
            setTags('#selected-group', list,'group');
            $('#selected-group .close').on('click', function () {
                var value = $(this).data('value');
                $('option[value=' + value + ']', $(select)).get(0).selected = false;
            });
            if (list.length > 0) {
                $('.btn-get-users').removeClass('hidden');
            } else {
                $('.btn-get-users').addClass('hidden');
            }
        });

        $(window).on('resize', setJqGridWidth);

        function setJqGridWidth(){
            var width = $('.jqGrid_wrapper').width();
            $('#user-list').setGridWidth(width);
//            $('#reward-list').setGridWidth(width);
        }

        $('.btn-get-users').on('click', function () {
            var filter_type = $('#filter_type').val();
            var filter_list = [];
            if (filter_type == 1) {
                filter_list = $('#channel_list').val();
            } else {
                filter_list = $('#group_list').val();
            }
            var selected_user_map = {};
            toAjax('/ceb/users/filters', {filter_type: filter_type, filter_list: filter_list}, 'POST')
                    .on('hxop.ajax-success', function (evt, data) {
//                        $.each()
                        $("#user-list").jqGrid({
                            data: data.list,
                            datatype: "local",
                            height: 250,
                            autowidth: true,
                            shrinkToFit: true,
                            multiselect: true,
                            rowNum: 14,
                            rowList: [10, 20, 30],
                            colNames: ['ID', '手机号', '姓名'],
                            colModel: [
                                {
                                    name: 'id',
                                    index: 'id',
                                    width: 60,
                                    sorttype: "int"
                                },
                                {
                                    name: 'phone',
                                    index: 'phone',
                                    width: 180,
                                    sorttype: "int",
                                },
                                {
                                    name: 'name',
                                    index: 'name',
                                    width: 100
                                }
                            ],
                            pager: "#user-list-pager",
                            viewrecords: true,
                            caption: "筛选结果",
                            hidegrid: false
                        });
                        var map = mkmap(data.list, 'id');
                        $("#user-list .cbox").on('change', function () {
                            var id_list = getSelectedUsers();
                            $.each(id_list, function (k, id) {
                                if (id in selected_user_map) return;
                                selected_user_map[id] = {
                                    name: map[id].name,
                                    value: id
                                };
                            });
                            resetUser();
                        });

                        function resetUser() {
                            var list = [];
                            $.each(selected_user_map, function (k, v) {
                                list.push(v);
                            });
                            setTags('#selected-user-list', list, 'ignore_user');
                            $('#selected-user-list .close').on('click', function () {
                                var value = $(this).data('value');
                                delete selected_user_map[value];
                                resetUser();
                            });
                        }
                    });
//            setJqGridWidth();
        });
        var select_reward_map = {};
        $('#reward-search-btn').on('click', function () {
            var keyword = $('#reward-keyword').val();
            if (!keyword) {
                alert('请输入关键字查询');
                return;
            }
//            toAjax('/ceb/rewardpackages/search',{keyword:keyword},'GET')
//                    .on('hxop.ajax-success',function(evt,data){
            var list1 = [{
                id: 1,
                name: '圣诞节奖励',
                items: [{
                    id: 1,
                    name: '圣诞活动100元现金券',
                    count: 1
                }, {
                    id: 1,
                    name: '圣诞活动1%加息券',
                    count: 2
                }]
            }, {
                id: 2,
                name: '春节贺岁奖励',
                items: [{
                    id: 1,
                    name: '春节贺岁活动100元现金券',
                    count: 1
                }, {
                    id: 1,
                    name: '春节贺岁活动1%加息券',
                    count: 2
                }]
            }];
            var list = [];
            $.each(list1, function (k, v) {
                var d = {};
                d.name = v.name;
                d.behavior = '<select class="behavior-select" data-id="' + v.id + '"></select>';
                d.action = '<a class="add-reward-btn">添加</a>';
                d.reward = '';
                $.each(v.items,function(k1,v1){
                    d.reward += v1.name + 'X' + v1.count + ','
                });
                d.reward = d.reward.substr(0, d.reward.length - 1);
                list.push(d);
            });
            $("#reward-list").jqGrid({
                data: list,
                datatype: "local",
                height: 250,
                autowidth: true,
                shrinkToFit: true,
                rowNum: 14,
                rowList: [10, 20, 30],
                colNames: ['奖池名称', '奖品', '行为', '操作'],
                colModel: [
                    {
                        name: 'name',
                        index: 'name',
                        width: 100,
                    },
                    {
                        name: 'reward',
                        index: 'reward',
                        width: 200,
                    },
                    {
                        name: 'behavior',
                        index: 'behavior',
                        width: 100
                    },
                    {
                        name: 'action',
                        index: 'action',
                        width: 80
                    }
                ],
                pager: "#user-list-pager",
                viewrecords: true,
                caption: "筛选结果",
                hidegrid: false
            });
            var s = '';
            $.each(behavior_list,function(k,v){
                s += '<option value="' + v.id + '">' + v.name + '</option>';
            });
            $('.behavior-select').html(s);

            $('.add-reward-btn').on('click',function(){
                var row = $(this).parents('tr');
                var id = row.attr('id');
                var behavior = $('.behavior-select',row).val();
                if(id in select_reward_map){
                    return;
                }
                var name = row.children().first().html();
                var value = id + ',' + behavior;
                select_reward_map[id] = {
                    name:name,
                    value:value
                };
                resetReward();
            });
//            setJqGridWidth();
            function resetReward(){
                var list = [];
                $.each(select_reward_map,function(k,v){
                    list.push(v);
                });
                setTags('#selected-reward',list,'rewards');

                $('#selected-reward .close').on('click',function(){
                    var id = $(this).data('value').split(',')[0];
                    delete select_reward_map[id];
                    resetReward();
                });
            }
//                    });
        });
    });

</script>

</body>

</html>
